<template>
	<view class="course-item" @click="courseClick">
		<view class="top-v">
			<view class="type">{{formatType(course.category)}}</view>
			<view class="name">{{course.typeName}}-{{course.courseName}}</view>
		</view>
		<view class="bottom-v">
			<u-icon name="clock"></u-icon>
			<view class="time">
				{{formatTime(course.courseDate, 'mm月dd日')}} {{formatTime(course.beginTime ,'hh:MM')}}-{{formatTime(course.endTime ,'hh:MM')}}
			</view>
			<view class="remark">
				{{course.remark || ''}}
			</view>
		</view>
	</view>
</template>

<script>
	import { formatDateByTimestamp } from '@/utils/utils.js'
	export default {
		name: "CourseItem",
		props: {
			course: {
				type: Object,
				default () {
					return {}
				}
			},
			category: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			formatType(category) {
				if (category === 0) {
					return '活动课'
				} else if (category === 3) {
					return '自建课'
				} else {
					return '主题课'
				}
			},
			formatTime(timestamp, fmt) {
				return formatDateByTimestamp(timestamp, fmt)
			},
			
			courseClick() {
				console.log('courseClick');
				this.$u.route({
					url: '/pages_teach/teach/teach-detail-page',
					params: {
						id: this.course.resObj
					}
				})
				// this.$u.route({
				// 	url: '/pages_teach/course/course-detail-page',
				// 	params: {
				// 		planId: this.course.planId,
				// 		category: this.category,
				// 		courseStatus: this.course.courseStatus,
				// 		templateType: this.course.templateType,
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	.course-item{
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		
		display: flex;
		flex-direction: column;
		
		.top-v{
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.type{
				height: 34rpx;
				background: #FFFFFF;
				border: 1rpx solid #DA473A;
				border-radius: 17rpx;
				padding: 0 14rpx;
				
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #DA473A;
				
			}
			.name{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				line-height: 38rpx;
				
				margin-left: 20rpx;
			}
		}
		
		.bottom-v{
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 26rpx;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 10rpx;
			
			.time{
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
